<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>localStorage</h1>
    <input type="text" name="key" id="">
    <input type="text" name="val" id="">
    <button>设置存储</button>
    <button>获取存储</button>
    <button>删除存储</button>
    <button>获取存储长度</button>
    <button>清空存储</button>
    <script>
        
        // 1. 设置localStorage属性 setItem(key,val)
        console.log(localStorage);
        // localStorage.setItem('age','18')
        let i = 0;
        document.querySelector('button').onclick = function(){
            // alert('123');
            i++
            localStorage.setItem('name','xiaoli'+i) 
        }


        // 2. 获取localStorage属性 getItem(key);
        // let name = localStorage.getItem('name');

        // console.log(name);

        // 3. 删除localStorage属性 removeItem(key);
        // localStorage.removeItem('name')

        // 4. 获取localStorage的length 属性
    //    let len =  localStorage.length;

    //    console.log(len);

        // 5. 清空localStorage的数据
        // localStorage.clear();
        
        // 6. 当存储内容有变化时 监听 window.onstorage
        window.onstorage = function(){
            console.log("变化了");
        }



    </script>
</body>
</html>